import React from 'react';
import {CircularProgress, Collapse, Grid, Typography} from "@material-ui/core";
import {makeStyles} from "@material-ui/core/styles";
import {useDispatch, useSelector} from "react-redux";
import {
  getVisualizationMethodInputs,
  selectDeselectVisMapping,
  selectDeselectVisualizationMethodsAndTypes,
  setGeneratedVisualizationCode,
  setVisualizationMethod,
  setVisualizationType
} from "../../../../../../redux/reducers/editor";
import Button from "@material-ui/core/Button";
import MenuSingleSelect from "../../../Common/MenuSingleSelect/MenuSingleSelect";
import VizMappingChoices from "./VisualizationChoices/VizMappingChoices";

const useStyles = makeStyles(theme => ({
  buttonSpacing: {
    marginRight: theme.spacing(1)
  },
  gutterBottom: {
    marginBottom: theme.spacing(2)
  },
}));

export default function Visualize({classes, handleOpenVisualization, handleStepForward, analysisMethodOutputsData, handleStepBackward}) {
  // Constants from Redux store
  const visualizationMethodAndTypeData = useSelector(state => state.editor.fetchedData.visualizationMethodsAndTypes);
  const visualizationMethodInputsData = useSelector(state => state.editor.fetchedData.visualizationMethodInputs);
  const selectedVisualizationMethodsAndTypes = useSelector(state => state.editor.selectedData.visualizationMethodsAndTypes);
  const selectedVisualizationMapping = useSelector(state => state.editor.selectedData.mappingVizInputAnalysisOutput);
  const selectedVisualizationType = useSelector(state => state.editor.selectedData.visualizationType);
  const selectedVisualizationMethod = useSelector(state => state.editor.selectedData.visualizationMethod);

  console.log('analysisMethodOutputsData',analysisMethodOutputsData)
  console.log('visualizationMethodAndTypeData',visualizationMethodAndTypeData)
  // Local constants
  const styles = useStyles();
  const dispatch = useDispatch();

  const generateVisualization = () => {
    handleOpenVisualization();
    handleStepForward();
  }

  const handleVisualizationMethod = (event, values) => {
    dispatch(setVisualizationMethod(values));
  };

  const handleVisualizationType = (event, values) => {
    dispatch(setVisualizationType(values));
    dispatch(getVisualizationMethodInputs(selectedVisualizationMethod.id, values.id))
    let vizMethodAndType = [];
    vizMethodAndType.push({
      id: selectedVisualizationMethod.id,
      name: selectedVisualizationMethod.name,
      creator: selectedVisualizationMethod.creator,
      description: selectedVisualizationMethod.description,
      vId: values.id,
      vName: values.name,
    });
    dispatch(selectDeselectVisMapping([]));
    dispatch(selectDeselectVisualizationMethodsAndTypes(vizMethodAndType));
    dispatch(setGeneratedVisualizationCode("", ""));
  }

  return (
    <>
      <Grid container direction="column" md={9} lg={8} xl={6}>
        <Typography variant={'body1'} className={styles.gutterBottom}>
          Select a visualization method, a type, assign visualization inputs and preview your visualization
        </Typography>
        {visualizationMethodAndTypeData.length !== 0 ?
          <>
            <Grid item className={styles.gutterBottom}>
              <MenuSingleSelect
                name={"Visualization Methods"}
                dataSource={visualizationMethodAndTypeData}
                itemName={Object.values(selectedVisualizationMethod).length === 0 ? null : [selectedVisualizationMethod][0]}
                handleChange={handleVisualizationMethod}
              />
            </Grid>

            <Collapse in={Object.keys(selectedVisualizationMethod).length !== 0}>
              <Grid item className={styles.gutterBottom}>
                <MenuSingleSelect
                  name={"Visualization Types"}
                  dataSource={selectedVisualizationMethod.values}
                  itemName={Object.values(selectedVisualizationMethod).length === 0 ? null : [selectedVisualizationType][0]}
                  handleChange={handleVisualizationType}
                />
              </Grid>
            </Collapse>

            <Collapse in={selectedVisualizationMethodsAndTypes.length !== 0}>
              {visualizationMethodInputsData.length !== 0 ?
                <>
                  <Typography className={styles.gutterBottom}> Select the Visualization Inputs </Typography>

                  <Grid container>
                    <Grid item xs={false} sm={1}/>
                    <Grid item xs={12} sm={10}>
                      {visualizationMethodInputsData.map((vizDataInput, index) => {
                        return (
                          <VizMappingChoices
                            key={index}
                            vizDataInput={vizDataInput}
                            selectedVisualizationMapping={selectedVisualizationMapping}
                            styles={styles}
                            analysisMethodOutputsData={analysisMethodOutputsData}/>
                        )
                      })}
                    </Grid>
                    <Grid item xs={false} sm={1}/>
                  </Grid>
                </>
                :
                <Grid container direction="column" alignItems="center">
                  <CircularProgress className={classes.gutterTopBottom}/>
                  <Typography variant="overline">Loading visualization input data</Typography>
                </Grid>
              }
            </Collapse>
          </>
          :
          <Grid container direction="column" alignItems="center">
            <CircularProgress className={classes.gutterTopBottom}/>
            <Typography variant="overline"> Loading Visualization Methods and Types data </Typography>
          </Grid>
        }

        <Grid container>

          <Button onClick={handleStepBackward} className={styles.buttonSpacing} aria-label="Back">
            Back
          </Button>

          <Button color="primary" onClick={generateVisualization} variant="contained"
                  disabled={selectedVisualizationMapping.length !== visualizationMethodInputsData.length}>
            Next
          </Button>

        </Grid>
      </Grid>
    </>
  )
}
